<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-02-28 11:25:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
 <!doctype html>
 <html>
 
 <head>
	 <meta charset="utf-8">
	 <meta name="viewport"
		 content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
	 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	 <title>Hello APP</title>
	 <link rel="stylesheet" type="text/css" href="../css/vant.css">
	 <link rel="stylesheet" type="text/css" href="../css/base.css" />
	 <link rel="stylesheet" type="text/css" href="../css/local.css" />
	 <script type="text/javascript" src="../script/jquery.js"></script>
	 <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	 <script type="text/javascript" src="../script/vue.min.js"></script>
	 <script type="text/javascript" src="../script/vant.min.js"></script>
	 <script type="text/javascript" src="../script/fastclick.js"></script>
	 <script type="text/javascript" src="../script/base.js"></script>
	 <style type="text/css">
		 .module {
			 padding: 8px 10px 0 10px;
		 }
 
		 .module:last-child {
			 padding-bottom: 15px;
		 }
 
		 .module>div {
			 background: #fff;
			 padding: 8px;
			 border-radius: 8px;
			 overflow: hidden;
		 }
 
		 .img {
			 width: 46px;
			 height: 46px;
			 line-height: 22px;
			 text-align: center;
			 border-radius: 23px;
			 padding: 11px;
			 position: relative;
			 color: #fff;
			 font-size: 28px;
		 }
 
		 .img img {
			 height: 24px;
			 vertical-align: middle;
		 }
 
		 .img-text {
			 font-size: 12px;
			 margin-top: 6px;
			 text-align: center;
			 height: 30px;
		 }
 
		 .label {
			 font-size: 13px;
			 line-height: 20px;
		 }
 
		 .label .squ {
			 background: #3775ff;
			 width: 5px;
			 height: 16px;
			 display: inline-block;
			 border-radius: 2px;
			 margin-top: 2px;
			 margin-right: 8px;
		 }
	 </style>
 </head>
 
 <body>
	 <div id="app" v-cloak>
		 <div class="box">
			 <van-nav-bar-main title="栏目"></van-nav-bar-main>
			 <div class="content">
				 <van-pull-refresh :disabled="loadingDisabled" v-model="refreshLoading" @refresh="onRefresh">
					 <div class="content-refresh">
						 <div class="module" v-for="role in roleList">
							 <div>
								 <div class="label flex-box">
									 <div class="squ"></div>
									 <div class="flex-main">{{role.TreeName}}</div>
								 </div>
								 <div>
									 <van-grid :column-num="4" :border="false">
										 <van-grid-item v-for="row in role.Node">
											 <div class="img" :style="{'background':row.AP_Colour}"
												 @click="openWin(row)">
												  <img :src="ip + row.PIC_PH" />
											 </div>
											 <div class="img-text">{{row.APFunName}}</div>
										 </van-grid-item>
 
									 </van-grid>
								 </div>
							 </div>
 
						 </div>
					 </div>
 
				 </van-pull-refresh>
 
 
 
			 </div>
		 </div>
 
 
	 </div>
 </body>
 <script type="text/javascript">
	 var vm;
	 apiready =  function () {
 
 
 
 
 
 
		 vm = new Vue({
			 el: '#app',
			 data: {
				 showLoading: false,
				 loadingDisabled: false,
				 refreshLoading: false,
				 titleName: api.pageParam.titleName,
				 ip: 'http://' + APP.serverIP(),
				 dataList: [],
				 roleList: []
			 },
			 created: function () {
				 var that = this;
				 that.getUserRole();
			 },
			 methods: {
				 onRefresh() {
					 var that = this;
					 that.refreshLoading = true;
					 that.getUserRole();
				 },
				 getUserRole() {
					 var that = this;
					 that.showLoading = true;
					 APP.ajax('AP_GetUserNM', {}, function (res) {
						 that.showLoading = false;
						 that.refreshLoading = false;
 
 
						 var roleList = [];
						 for (var i in res.ds) {
							 var x = 0;
							 for (var j in roleList) {
								 if (res.ds[i].TreeName == roleList[j].TreeName) {
									 x = 1;
									 roleList[j].Node.push(res.ds[i]);
								 }
							 }
							 if (x == 0) {
								 roleList.push({
									 TreeName: res.ds[i].TreeName,
									 Node: [res.ds[i]]
								 })
							 }
						 }
						 that.roleList = roleList;
					 })
				 },
				 openWin(row) {
					 var that = this;
					 var pageParam = {}
					 if (row.Para) {
						 var paraArray = row.Para.split(';');
						 for (var i in paraArray) {
							 var paraRowArray = paraArray[i].split('=');
							 if (paraRowArray[1] == 'true') {
								 paraRowArray[1] = true;
							 }
							 if (paraRowArray[1] == 'false') {
								 paraRowArray[1] = false;
							 }
							 pageParam[paraRowArray[0]] = paraRowArray[1];
						 }
					 }
					 pageParam.titleName = row.APFunName;
					 
					 if(row.AP_Link=='Form/List'){
						 console.log(row.AP_Link)
						 api.openWin({
							 name: row.AP_Link,
							 url: 'Form/List.html',
							 reload: true,
							 slidBackEnabled: false,
							 allowEdit: false,
							 pageParam: pageParam
						 })
					 }
					 else{
						 api.openWin({
							 name: row.AP_Link,
							 url: 'module/' + row.AP_Link + '.html',
							 reload: true,
							 slidBackEnabled: false,
							 allowEdit: false,
							 pageParam: pageParam
						 })
					 }
 
 
 
 
					 
				 },
			 }
		 })
	 };
 </script>
 
 </html>